<template>
    <div>
        <nav-bar>
            <template v-slot:default>新用户注册</template>
        </nav-bar>
        <div class="registerlogo">
            <img src="../../assets/images/MallLogo.png" height="250" width="250"/>
            <van-form @submit="onSubmit">
                <van-field
                        v-model="name"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <van-field
                        v-model="password_confirmation"
                        type="password"
                        name="确认密码"
                        label="确认密码"
                        placeholder="请确认密码"
                        :rules="[{ required: true, message: '请确认写密码' }]"
                />
                <van-field
                        v-model="email"
                        type="email"
                        name="邮箱"
                        label="邮箱"
                        placeholder="请填写邮箱"
                        :rules="[{ required: true, message: '请填写正确的邮箱' }]"
                />
                <div style="margin: 16px;">
                    <div class="link-login" @click="$router.push({path:'/login'})">已有帐户，立即登录</div>
                    <van-button round block type="info" native-type="submit" color="#4FC08D">提交</van-button>
                </div>
            </van-form>
        </div>

    </div>
</template>

<script>

    import {ref,toRefs,reactive} from 'vue'
    import {register} from "../../network/user";
    import NavBar from "../../components/common/navbar/NavBar";
    import {Notify, Toast} from 'vant'
    import router from "../../router";
    export default {
        name: "Register",
        components:{
            NavBar
        },
        setup () {
            const userinfo =reactive({
                name:'',
                password:'',
                password_confirmation:'',
                email:''
            })
            const onSubmit =()=>{
                //先验证。。
                if (userinfo.password != userinfo.password_confirmation){
                    Notify('两次密码不一致')
                }else{  //提交给服务器
                    register(userinfo).then(res=>{
                        if (res.status=='201'){
                            Toast.success('注册成功');
                            setTimeout(()=>{
                                router.push({path:'/login'})
                            },1000)
                            userinfo.password_confirmation='';
                            userinfo.password='';
                        }
                    })

                }
            }
            return{
                ...toRefs(userinfo),
                onSubmit
            }

        }
    }
</script>

<style scoped lang="scss">
.registerlogo{
    margin-top: 20px;

}
    .link-login{
        margin-bottom: 20px;
        color: #4fc08d;
        float: left;

    }
</style>